﻿@{
    Layout = "~/Views/Shared/_Main.cshtml";
}
<div class="title-line title-line-red text-right">
    <h4>
        用户登录</h4>
</div>
<div class="row">
    <div class="span7">
        <img src="/content/img/l-veg.png" /><img src="/content/img/l-fruit-x.png" /><img
            src="/content/img/l-pork.png" /><img src="/content/img/l-egg-x.png" /><img src="/content/img/l-veg-x.png" /><img
                src="/content/img/l-fruit.png" /><img src="/content/img/l-pork-x.png" /><img src="/content/img/l-egg.png" />
    </div>
    <div class="span5">
        <!--表单-->
        <form id="loginform" action="/account/login" method="post" class="form-horizontal">
        <input type="hidden" name="token" />
        <input type="hidden" name="ReturnUrl" value="@Request.QueryString["ReturnUrl"]" />
        @if (ViewBag.Error != null)
        { 
            <label class="alert alert-error">@ViewBag.Error</label>
        }
        <div class="control-group">
            <label class="control-label label-short" style="width: 80px;" for="account">
                帐户</label>
            <div class="controls-short" style="padding-left:100px;">
                <input type="text" class="{required:true,email:true,messages:{required:'*',email:'格式错误'}}" 
                    name="username" id="txtusername" value="@ViewBag.UserName" placeholder="登录名称" />
            </div>
        </div>
        <div class="control-group">
            <label class="control-label label-short" for="password" style="width: 80px;">
                密码</label>
            <div class="controls-short" style="padding-left:100px;">
                <input type="password" class="{required:true,messages:{required:'*'}}" name="password" id="txtpassword" placeholder="用户密码" />
            </div>
        </div>
        <div class="control-group row-fluid">
            <label class="control-label label-short" for="iptCheckCode" style="width: 80px;">
                验证码</label>
            <div class="controls-short" style="padding-left:100px;">
              <div class="span5">
                    <input type="text" id="iptCheckCode" placeholder="请输入验证码" name="validCode"
                        maxlength="4" style="width:100px;" class="{required:true,minlength:4,maxlength:4,messages:{required:'*',minlength:'四位验证码',maxlength:'四位验证码'}}" />
                </div>
                <div id="codeimg" class="span3">
                </div>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label label-short" for="password" style="width: 80px;">
            </label>
            <div class="controls controls-short" style="margin-left: 90px;">
                <button type="submit" class="btn btn-danger">
                    <i class="icon-ok icon-white"></i>立即登录</button>
            </div>
        </div>
        <div class="control-group">
            <label class="control-label label-short" for="password" style="width: 80px;">
            </label>
            <div class="controls controls-short" style="margin-left: 90px;">
                <a href="/account/forgotpassword">忘记密码？</a>&nbsp;|&nbsp;<a href="/account/register">立即注册</a>
            </div>
        </div>
        </form>
        <!--#表单-->
    </div>
</div>
@section tail{
    <script type="text/javascript" src="/Scripts/jquery.validate.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.metadata.js"></script>
    <script type="text/javascript" src="/Scripts/plug.js"></script>
    <script type="text/javascript">
        var validation = new plug.BindValidCode();
        $(function () {
            validation.BindValidator();
            $('#loginform').validate({
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                }
            });
        });
        function Refalsh(sender) {
            validation.Refalsh(sender);
        }
    </script>
}
